<template>
<div class="container" style="font-size: small">
    <div style="background-color: #FFFFFF;width: auto;height: auto;display: flex;box-shadow: 0 10px 10px 10px #eee">
        <div class="a1" >
            <img class="ia1" src="../assets/logo.png">
            <div class="a11" style="margin-left: 45px">
                <ul>
                    <li ><img src="../assets/logo.png" ></li>
                    <li><img src="../assets/logo.png" ></li>
                    <li><img src="../assets/logo.png" ></li>
                    <li><img src="../assets/logo.png" ></li>
                </ul>
            </div>
        </div>

        <div class="a2" >
            <h2>2018年 普洱茶</h2>
            <div class="a21">
                <div style="display: flex;flex-direction: column" class="a211">
                    <span>商城价:<span style="margin:0 10px;font-size: larger;color: #B91C1C;font-weight: bolder">99.00</span><span style="font-size: smaller;font-weight: lighter;color: #eee">(原售价: ￥999.00)</span></span>
                    <span>市场价:<span style="margin:-10px 10px;font-weight: lighter;color: #eee;text-decoration: line-through;"> ￥999.00</span></span>
                    <span>库存:<span style="margin:-10px 10px;">335</span></span>
                    <span>运费:<span style="margin:-10px 10px;">免运费</span></span>
                </div>
            </div>
            <div>
            </div>

            <div>
                <div class="purchasenum mt25">
                    <span style="font-weight: bold">购买数量</span>
                    <i class="el-icon-minus" @click="numbersChange('reduce')"></i>
                    <input style="margin-left: 1px;font-weight: bolder;color: #000" type="number" min="1" step="1" :value="numbers">
                    <i class="el-icon-plus" @click="numbersChange('add')"></i>
                </div>

                <div class="addpurchase">
                    <button type="button" class="add mt25 ml68" @click="addCart">
                        <i class="el-icon-shopping-cart-1">&nbsp;&nbsp;加入购物车</i>
                    </button>
                    <button type="button" class="purchase mt25 ml18">立即购买</button>
                </div>
            </div>

        </div>
    </div>

</div>
</template>

<script>


export default {
    name: "GoodsDetail",
    data(){
        return{
            numbers:1
        }
    },
    methods:{
        numbersChange(val){
            if(val==='add'){
                this.numbers++;
            }else{
                if(this.numbers>1){
                    this.numbers--;
                }
            }
        },addCart(){
            alert('加入购物车成功！')
        }
    }
}
</script>

<style>


/*加减框*/
.mt25{
    margin-top: 25px;
    user-select: none;
}
.ml18{
    margin-left: 18px;
}
.ml68{
    margin-left: 68px;
}
.purchasenum > span{
    color:#898989;
    font-family: "宋体",serif;
    padding: 8px 24px 0 0;
}
.purchasenum > i,
.purchasenum > input{
    display: inline-block;
    width: 30px;
    height:30px;
    line-height: 30px;
    text-align: center;
    color:#bbbbbb;
    border: 1px solid #cecece;
}
.purchasenum > input{
    width:45px;
    box-sizing: content-box;
    vertical-align: top;
    margin-left: -4px;
    border-left-style: none;
}
.purchasenum .plus{
    margin-left: -4px;
}
.addpurchase > button{
    width: 186px;
    height: 45px;
    font:bold 16px/45px "微软雅黑";
    cursor: pointer;
    text-align: center;
}
.addpurchase .add{
    color:#fafbf3;
    background-color: #f26a12;

}
.addpurchase .purchase{
    border: 1px solid #F46C15;
    background-color: #FEF9F6;
    color:#F46C15;
}

/*轮播图*/
.a2{
    padding:15px 0;
    width: 100%;
    margin-right: 15px;
}
.a211 span{
    margin: 10px;
}
.a2 .a21{
    display: flex;
    flex-direction: row;

    margin-top: 10px;
    background-color: #d4af7a;
    width: 100%;
    border-radius: 2px;
}

.a1{
    width: 600px;
    margin: 10px;
    text-align: center;
}
.a1 .ia1{
    width: 250px;
    height: 200px;

}

.a1 .a11 img{
    width: 40px;
    height: 40px;
}
.a1 .a11 img:hover{
    border: 3px #FF4F0D solid;
    box-shadow: 0 16px 32px 0 rgba(48,55,66,0.15);
}

.a11 ul li{
    list-style: none;
    float: left;
    margin-left: 25px;

}

</style>